<template>
<div id="RzPage" class="page-blank">
  <van-nav-bar title="认证信息" left-arrow @click-left="goBack()"/>
  <div class="flex-body">
    <van-cell-group>
      <van-field v-model="name" required clearable label="真实姓名" placeholder="请输入真实姓名"/>
      <van-field v-model="code" required clearable label="证件号" placeholder="请输入证件号"/>
    </van-cell-group>
    <div style="text-align: center; margin: 0.4rem 0;" @click="sele('faceUrl')">
      <div v-if="faceUrl" style="width: 6rem; height: 3.2rem; margin: 0 auto; line-height: 3.4rem; border-radius: 5px; 
        text-align: center; box-sizing: border-box; border: 1px solid #f1f1f1;"
        :style="`background: #fff url(${ faceUrl }) center center / contain no-repeat;`"></div>
      <div v-else style="width: 6rem; height: 3.2rem; margin: 0 auto; line-height: 3.4rem; font-size: 0.3rem; background: #FFFFFF; 
        color: #aaa; border-radius: 5px; text-align: center;">请上传身份证正面</div>
    </div>
    <div style="text-align: center; margin: 0.4rem 0;" @click="sele('backUrl')">
      <div v-if="backUrl" style="width: 6rem; height: 3.2rem; margin: 0 auto; line-height: 3.4rem; border-radius: 5px; 
        text-align: center; box-sizing: border-box; border: 1px solid #f1f1f1;"
        :style="`background: #fff url(${ backUrl }) center center / contain no-repeat;`"></div>
      <div v-else style="width: 6rem; height: 3.2rem; margin: 0 auto; line-height: 3.4rem; font-size: 0.3rem; background: #FFFFFF;
        color: #aaa; border-radius: 5px; text-align: center;">请上传身份证反面</div>
    </div>
    <div style="font-size: 14px;">{{ serverId }}</div>
    
    <div style="width: 6.7rem; height: 1.05rem; line-height: 1.05rem; text-align: center; border-radius: 5px; 
      background: #18a3dc; color: #fff; margin: 1rem auto; font-size: 0.32rem;" @click="submit">保存认证</div>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;
@Component
export default class RzPage extends Vue {

  name: string = ''
  code: string = ''
  faceUrl: string = ''
  backUrl: string = ''

  serverId: string = ''

  sele( url: string ) {
    if(this.$store.state.wxSwitch != 1) return this.$toast('请在微信公众号内打开进行该操作');
    let config = this.$store.state.config;
    wx.config({ ...config, debug: false, jsApiList: [ 'scanQRCode', 'chooseImage', 'uploadImage', 'getLocation', 'openLocation' ] });
    wx.chooseImage({ count: 1, sizeType: [ 'compressed' ], sourceType: [ 'album', 'camera' ], 
      success: (res: any) => {        
        wx.uploadImage({ localId: res.localIds[ res.localIds.length - 1 ], isShowProgressTips: 1,
          success: (res: any) => {
            axios.get('/api/upload/getUploadFile', {
              media_id: res.serverId
            }).then((res: any) => {
              if(url == 'faceUrl') this.faceUrl = res;
              else this.backUrl = res;
            });
          }
        });
      }
    });
  }

  submit() {
    if(this.name == '') return this.$toast('请输入真实姓名');
    if(this.code == '') return this.$toast('请输入证件号');
    if(this.faceUrl == '') return this.$toast('请上传身份证正面图片');
    if(this.backUrl == '') return this.$toast('请上传身份证反面图片');
    axios.post('/api/IdentityController/addIdentity', {
      name: this.name, code: this.code, idCardFrontUrl: this.faceUrl, idCardBackUrl: this.backUrl, userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      this.$toast('认证成功！');
      this.$router.replace('RzInfo');
    });
  }

  goBack() { this.$router.go(-1); }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#RzPage {
  background: #f7f7f7;
  overflow: hidden;
  .row-item{
    height: 1.1rem;
    font-size: 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .left-name { color: #000000; }
    .right-text { color: #b3b3b3; }
  }
  .border-bottom{ 
    width: 100%;
    height: 1px;
    background: #ebebeb;
  }
}
</style>

